<template>
	<view class="big-box flex-col align-center">
		<!-- <top-navigation backIconColor='#FFF' bgColor="#CC1D1D" :isFix='true' :isShow='true'>
			<text slot='center-slot' class="center-slot">机场贵宾厅</text>
		</top-navigation> -->
		<!-- <view class="nav-box  align-center" :style="{top:calculateHeight}"> -->
		<view class="nav-box flex-col align-center">
			<view class="search" style="width: 100;">
				<view class="search-box align-center">
					<u-search shape="square" :clearabled="true" v-model='searchKey' placeholder='搜索休息室'
						:showAction='false'></u-search>
				</view>
				<!-- <view class="justify-start align-center">
					<view class="location">
						沈阳
					</view>
					<view class="triangle">
				
					</view>
				</view> -->
			</view>

			<view class="tab justify-center">
				<u-tabs :list="list2" @click="tapTab" lineColor='#CC1D1D' lineWidth='37rpx' :scrollable='true'
					:activeStyle="{
					'font-size': '32rpx',
					'color': '#000000',
					'font-weight': '500'
				}" :inactiveStyle="{
					'font-size': '28rpx',
					'color': '#818181',
					'font-weight': '400'
				}" itemStyle='height:105rpx'></u-tabs>
			</view>
		</view>
		<view class="tab-type">
			<view @tap="$navto('/airvip/detail/detail?id='+item.id)" class="mt-20 tab-type-item "
				v-for="(item,index) in tabList" :key="index" v-if="tabCurrent==0">
				<view class="goods-info align-center justify-between">
					<view class="order_num">
						订单编号：{{item.order_num}}
					</view>
					<view class="order-type" :style="{color:getStatusInfo(item.status).color}">
						{{item.status | getStatus}}
					</view>
				</view>
				<view class="order-info">
					<view class="car-tips" v-if="item.type=='car'">
						距出发前2h可免费取消
					</view>
					<view class="title">
						{{item.title}}
					</view>
					<view class="date-price justify-between">
						<view class="target_date">
							{{item.target_date}}
						</view>
						<view class="price_total">
							合计：<text class="price">￥{{item.price_total}}</text>
						</view>
					</view>
					<view class="btn-box justify-end">
						<view class="order-btn center ml-20" v-if="item.status==3 || item.status==0">
							取消订单
						</view>
						<view class="order-btn center ml-20" @tap="$navto(getUrl(item))">
							查看订单
						</view>
						<view class="order-btn-red center ml-20" v-if="item.status==3">
							待付款
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import {
		orderStatus,
		serveType
	} from '@/utils/constants.js'
	export default {
		props: {
			scrollTop: {
				default: 0,
			}
		},
		data() {
			return {
				type: 0,
				list2: orderStatus,
				loading: false,
				isMsg: false,
				location: '沈阳',
				searchKey: '',
				oldscrollTop: 0,
				pageListData: {},
				tabCurrent: 0,
				current: 0,
				current2: 0,
				tabList: [],
				pageInfo: {
					page: 1,
					row: 10,
					total: 1,
				},

				banner: [

				],
				vip_list: [],
				home_text: [],
				info_list: [],
			}
		},
		onReachBottom() {
			if (this.pageInfo.page >= this.pageInfo.last_page) {
				console.log('最后一页');
				return
			} else {
				if (this.loading) return
				this.loading = true

				this.pageInfo.page++
				this.getList()
			}
			console.log('上拉触底');
		},
		filters: {

			getStatus(e) {
				return orderStatus.find(item => item.type == e).name
			},
			
		},
		computed: {
			calculateHeight() {
				return `calc(${this.statusHeight}px + ${88}rpx)`;
			},
			bannerHeight() {
				return `calc(${this.statusHeight}px + ${88+112}rpx)`;
			},
			calculateStatusBar() {
				return `${this.statusHeight}px`;
			},
			zIndex() {
				if (this.oldscrollTop < this.scrollTop) {
					this.oldscrollTop = this.scrollTop
					return this.scrollTop > 10
				} else {
					this.oldscrollTop = this.scrollTop
					return false
				}
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			...mapActions(['getPreOrderList']),
			getStatusInfo(e) {
				return orderStatus.find(item => item.type == e)
			},
			getUrl(e,id) {
				return serveType.find(item => item.type == e.type)['path'+e.status] + '?order_id='+e.id
			},
			bannerTap(e) {
				let id = this.vip_list[e].id
				console.log(id);
			},
			tapTab(e) {
				this.type = e.value
				this.pageInfo.page = 1
				this.tabList = []
				this.getList()
				console.log(e);
			},
			async getList() {
				let res = await this.getPreOrderList({
					...this.pageInfo,
					type: this.type,
					key: '',
				})
				this.tabList = [...this.tabList, ...res.data]
				this.pageInfo = {
					page: res.current_page,
					row: res.per_page,
					total: res.total,
					last_page: res.last_page
				}
				this.loading = false

			}
		}
	}
</script>
<style lang="scss" scoped>
	.big-box {
		padding-bottom: 30rpx;
		background: #F8F8F8;

		.center-slot {
			color: #FFF;
		}

		.grid {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			width: 670rpx;
			margin-top: 42rpx;

			.grid-item {
				margin-bottom: 36rpx;
			}

			.gird-item-t {
				display: block;
				margin-top: 18rpx;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 22rpx;
				color: rgba(0, 0, 0, 0.87);
			}
		}

		.tab-type {
			margin-top: 200rpx;
			width: 670rpx;

			.tab-type-item {
				width: 670rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.05);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
			}

			.goods-img {
				margin-right: 20rpx;
			}

			.btn-box {
				margin-top: 42rpx;
				width: 100%;
			}

			.order-btn {
				width: 147rpx;
				height: 58rpx;
				background: #FFFFFF;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				border: 1rpx solid #000000;

				font-weight: 500;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.87);
			}

			.order-btn-red {
				width: 147rpx;
				height: 58rpx;
				background: #CC1D1D;
				border-radius: 10rpx 10rpx 10rpx 10rpx;

				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.order-info {
				padding: 29rpx 23rpx 24rpx;

				.car-tips {
					font-weight: 400;
					font-size: 24rpx;
					color: #CC1D1D;
					margin-bottom: 27rpx;
				}

				.date-price {
					margin-top: 17rpx;

					.target_date {
						font-size: 26rpx;
						color: rgba(53, 53, 53, 0.87);
					}

					.price_total {
						font-weight: 400;
						font-size: 26rpx;
						color: rgba(53, 53, 53, 0.87);

						.price {
							font-weight: 500;
							font-size: 30rpx;
							color: rgba(0, 0, 0, 0.87);
						}
					}
				}
			}

			.goods-info {
				width: 100%;
				padding: 0 23rpx;
				height: 70rpx;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

				.order_num {
					font-weight: 500;
					font-size: 26rpx;
					color: rgba(0, 0, 0, 0.87);
				}

				.order-type {
					font-weight: 500;
					font-size: 26rpx;
					// color: #CC1D1D;
				}
			}





		}

		.tab {
			width: 100%;
			z-index: 10;
			background: #ffffff;
			position: sticky;

			.tab-item {
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #000000;
			}
		}

		.banner-2 {
			width: 670rpx;
			height: 279rpx;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			overflow: hidden;
		}

		.banner {
			position: relative;
			z-index: 3;
			width: 670rpx;
			height: 303rpx;
			margin-top: 40rpx;
			border-radius: 30rpx;
			overflow: hidden;
			transition: all 1s;
		}

		.indicator {
			justify-content: center;

			&__dot {
				height: 6px;
				width: 6px;
				border-radius: 100px;
				background-color: rgba(255, 255, 255, 0.35);
				margin: 0 5px;
				transition: background-color 0.3s;

				&--active {
					width: 18px;
					background-color: #ffffff;
				}
			}
		}

		.nav-fix {
			position: fixed;
			top: 0;
			left: 0;
			transition: all 1s;
		}


		.nav-tit {
			position: fixed;
			z-index: 1;
			left: 53rpx;
		}

		.nav-box {
			position: fixed;
			left: 0;
			width: 100vw;
			background: #FFFFFF;
			z-index: 1;

			.location {
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				margin: 0 8rpx 0 37rpx;
			}

			.triangle {
				margin-top: 4rpx;
				width: 0;
				height: 0;
				border-top: 14rpx solid #FFF;
				border-right: 14rpx solid transparent;
				border-left: 14rpx solid transparent;
			}
		}





		.dot {
			width: 13rpx;
			height: 13rpx;
			background: #DB4949;
			border-radius: 50%;
			position: absolute;
			top: -4rpx;
			right: 0;
		}

		.search {
			width: 100vw;
			padding-left: 40rpx;
		}

		.search-box {
			margin-top: 20rpx;
			width: 539rpx;
			height: 72rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			overflow: hidden;
			// background: rgba(255, 255, 255, 0.6);
			// border-radius: 30rpx 30rpx 30rpx 30rpx;
		}

	}
</style>